🦋 Changeset detected

Latest commit: d0c4b6b

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

E2E Examples — all passed

All examples passed in the latest run.

❌ E2E Dev Smoke — failed

1 passed · 3 failed · 0 skipped · 73s

• clicking the Settings icon opens the Settings view
• token route setup — From and To tokens selected via UI
• widget container is displayed with Exchange heading

View run — the full HTML report is attached as the playwright-report-dev-smoke artifact.

E2E Playground results

 19 failed
 139 passed

Details

 158 tests across 10 suites
 4 minutes, 52 seconds
 d0c4b6b

📥 Download full HTML report (open the run → Artifacts → playwright-report)

🔍 QA Review — EMB-322

🔗 Linear Ticket · Pull Request #793

⚠️ Re-review — 2 new commits pushed after initial CHANGES_REQUESTED (2026-06-30): 8ba07dce (review feedback fixes) and 326d11e1 (form merge refinement). Developer responses reviewed for all 12 previously flagged items.

🧠 What this ticket does

Adds a new "Limit" mode to the LI.FI widget — a bespoke feature for Jumper Pro's right-side order entry panel. The implementation introduces a mode toggle via _navigationTabs, a limit price card with base/quote flip and quick-set presets, an order expiry selector, a partial-fill toggle, and linked field derivation (limitPrice = receiveAmount / sendAmount). The execution flow reuses the existing widget infrastructure (routes → signing → relay → status polling), adding validUntil and partiallyFillable params. This is an InternalWidgetMode feature not surfaced to B2B integrators.

Verdict: Needs Work — one hard merge blocker remains open: _navigationTabs: ['swap-advanced', 'bridge-advanced', 'limit'] is still uncommented in defaultWidgetConfig.ts, breaking 22 CI E2E tests. All other previously flagged items are resolved or accepted with justification. Two pre-merge hygiene items (public-docs checklist, visual showcase) are pending completion.

📋 Previously Flagged Items — Resolution Status

⚠️ Issues Found (1 open)

🔴 [Critical] _navigationTabs still uncommented — CI is failing

packages/widget-playground/src/defaultWidgetConfig.ts HEAD (commit 326d11e1) still has:

_navigationTabs: ['swap-advanced', 'bridge-advanced', 'limit'],

Neither post-review commit addressed this. The CI run against 8ba07dce (the most recent CI result) shows 19 Playground E2E failures and 3 Dev Smoke failures — all caused by the playground defaulting to a tab-bar widget instead of the plain Exchange view.

Developer's stated intent: "kept enabled on purpose for now to exercise the tab bar during testing; will restore before merge." That commitment is not yet fulfilled.

Fix: // _navigationTabs: ['swap-advanced', 'bridge-advanced', 'limit']. The limit tab is exercisable via the playground's mode panel without this being the global default.

✅ Resolved Items — Verification Notes

Item 2 — mergeDefaultFormValues fix (verified correct)

Final guard in createFormStore.ts:

value:
  userValues[key]?.value !== undefined && userValues[key]?.value !== ''
    ? userValues[key]?.value
    : defaultValues[key]?.value,

• partiallyFillable = false → false !== undefined && false !== '' = true → user value preserved ✅
• numeric 0 → likewise preserved ✅
• empty string '' → falls to default (intentional — commit 326d11e1 preserves text-field clearing semantics) ✅

The second commit correctly refines the first fix. No regression introduced.

Item 10 — aria-disabled keyboard accessibility (fully resolved)

EditablePriceChip is a styled Box (<div>) with no tabIndex and no role — not in the keyboard tab order. The inner PriceChipInput is a native <input> with disabled={disabled} — natively removed from tab order when disabled. CSS pointerEvents: none via '&[aria-disabled="true"]' blocks mouse interaction. The onClick guard is defence-in-depth. Fix is architecturally sound.

Items 3, 4, 7, 11 — Accepted with justification

• Item 3 (validUntil): SDK @lifi/sdk@4.1.0 processes validUntil backend-side at route resolution; 60s refetch keeps drift negligible on a 1-day order. Justified.
• Item 4 (success summary): No limit-specific success screen designed for this iteration. AC 13 remains open on ticket as a documented deferral. Justified.
• Item 7 (preset percentages): [0, 1, 5, 10] confirmed as current design. Ticket text is outdated. Justified.
• Item 11 (unit tests for hooks): No DOM/React test environment in widget package. Derivation math covered by limitOrder.test.ts. Justified.

⚠️ Pre-merge Hygiene (2 items — no new QA cycle required)

• Item 8 — Public docs: WidgetMode = 'limit' and WidgetEvent.NavigationTabChanged are new exported public types. PR checklist item unchecked. Complete before merge.
• Item 12 — Visual showcase: PR body still contains _TODO: attach a screen recording.... Complete before merge.

🆕 New Issues Introduced (0)

No new defects in the post-review commits. Changes are narrowly scoped to the flagged items.

🧪 Test Coverage

Remaining unit gap (Low, carried from prior review):

• applyPriceOffset(price, 0) (Market preset) — not tested. Low risk, but the branch is exercised by every Market button click.

🔗 Downstream Impact

Blocks: EMB-323 (Integrate limit order execution flow with existing Jumper API)

• NavigationTabChanged event ✅ delivered
• selectedRouteId store field ✅ delivered
• EIP-712 signing path ✅ reused
• Limit-order success summary ❌ deferred (confirm EMB-323 tracks this if needed)

QA Agent — 2026-07-01 (re-review of initial 2026-06-30 review)

Thanks for the review — here's the disposition of each item.

Fixed (commit 8ba07dce)

• Item 2 — mergeDefaultFormValues boolean-false corruption: the merge now preserves any explicit user value via userValues[key]?.value !== undefined ? … : default, so a deliberate partiallyFillable=false (or 0) survives a config-driven setDefaultValues instead of reverting to the default.
• Item 5 — ReviewButton label in limit mode: added case 'limit' to both getButtonText() switches, using a new button.review ("Review") key.
• Item 6 — useLimitMarketRate guard: added a clarifying comment. The code already parses with Number(priceUSD), so a "0"/missing price correctly returns undefined (and avoids an Infinity rate) — behaviour was correct, intent is now documented. No logic change.
• Item 9 — isString(str: any): now (str: unknown): str is string.
• Item 10 — aria-disabled on the custom chip: the onClick now early-returns when disabled, so aria-disabled actually blocks activation. (Used a handler guard rather than tabIndex — the wrapper is a <div>, not a tab stop, and the inner <input> already handles native disabled for keyboard focus.)

Accepted with justification

• Item 3 — validUntil anchoring: @lifi/sdk@4.1.0 natively supports validUntil / partiallyFillable (getRoutes resolves them on the backend), so no transport workaround is needed. The value re-anchors on each 60s refetch, which keeps it close to signing time — intended behaviour, not a bug.
• Item 4 — limit-order success summary: out of design scope — no limit-specific success screen was designed for this iteration. Not implementing here.
• Item 7 — preset percentages: [0, 1, 5, 10] matches the current design; the ticket's "+2%/+5%" wording is outdated.
• Item 11 — useLinkedLimitFields unit test: the widget package has no DOM/React test environment (no jsdom / testing-library / renderHook) — all existing tests are pure functions. The hook's derivation math (deriveReceiveAmount / deriveLimitPrice) is already covered by limitOrder.test.ts, so the hook-level test is skipped rather than introducing a full harness for it.

Intentional / handled elsewhere

• Item 1 — _navigationTabs in the playground: kept enabled on purpose for now to exercise the tab bar during testing; will restore before merge.
• Item 8 — public docs: to be handled in the public-docs repo.
• Item 12 — visual showcase: PR description will be updated with a recording.

Widget flows: navigation tabs, modes & per-tab UI

This doc covers the config surface added on the limit-order branch: _navigationTabs,
the per-tab config layering, the new limit mode, defaultUI.layout, and the
NavigationTabChanged event. It shows how to wire up both a standard (single-flow)
widget and an advanced (tabbed) widget.

⚠️ _navigationTabs, mode: 'limit', and the internal tab keys (default,
private, refuel, swap-advanced, bridge-advanced, limit) are marked
@internal — not part of the stable public API yet. Only swap/bridge tab keys
and the non-limit modes are public.

The two ways to pick a flow

There are two levers, and they don't stack — _navigationTabs wins when both are set.

Resolution order (getNavigationTabKeys)

1. If _navigationTabs is set and non-empty → render exactly those tabs.
2. Else if mode: 'split' and modeOptions.split is an object (not a pinned
   string) → render the implicit ['swap', 'bridge'] tabs.
3. Else → no tab bar; mode alone drives a single flow.

Standard flows (no tab bar)

Set mode and leave _navigationTabs unset.

// Combined swap + bridge in one form
const config: WidgetConfig = { mode: 'default' }

// Gas / refuel only
const config: WidgetConfig = { mode: 'refuel' }

// Split, pinned to a single side (no tabs — the string pins it)
const config: WidgetConfig = { mode: 'split', modeOptions: { split: 'swap' } }

// Split with a Swap/Bridge tab bar (object form → implicit tabs)
const config: WidgetConfig = {
  mode: 'split',
  modeOptions: { split: { defaultTab: 'swap' } },
}

Available mode values: 'default' | 'split' | 'custom' | 'refuel' | 'limit'
('limit' is internal; 'custom' is driven by modeOptions.custom.type).

Advanced flows (explicit tab bar)

Set _navigationTabs to an ordered list of tab keys. The first entry is the
initially active tab. Each key is a preset that expands into a variant + mode

• modeOptions + defaultUI + requiredUI bundle.

// The "advanced" preset: two split sides + limit orders
const config: WidgetConfig = {
  _navigationTabs: ['swap-advanced', 'bridge-advanced', 'limit'],
}

// A "simple" tabbed setup
const config: WidgetConfig = {
  _navigationTabs: ['default', 'private', 'refuel'],
}

Tab key reference

Each key resolves to the bundle below. defaultUI: { layout: 'cards' } is applied to
every configured tab, so the tabbed experience uses the card-based form layout.

Labels come from i18n (header.*) and are overridable via the widget's translation
config.

Per-tab config layering

While a tab is active, its bundle is layered over the widget-level config, so the
rest of the widget reads tab-driven values transparently
(NavigationTabsStoreProvider). Precedence, per field:

• mode, variant, modeOptions → tab value, falling back to config (tab replaces).
• defaultUI, requiredUI → shallow-merged, tab wins on collisions
  ({ ...config.defaultUI, ...tab.defaultUI }). Fields the tab doesn't set are
  inherited from the config.

Example — a config-level defaultUI survives except where the tab overrides it:

// config.defaultUI = { transactionDetailsExpanded: true }
// active tab (e.g. 'private') sets defaultUI = { layout: 'cards' }
// → effective defaultUI = { transactionDetailsExpanded: true, layout: 'cards' }

Tabs with no defaultUI/requiredUI (the swap/bridge split keys) leave the
config's values untouched.

defaultUI.layout

New defaultUI field controlling the main form layout:

defaultUI?: {
  transactionDetailsExpanded?: boolean
  navigationHeaderTitleNoWrap?: boolean
  layout?: 'default' | 'cards' // @default 'default'
}

• 'default' — classic chain/token selectors + single amount input.
• 'cards' — redesigned stacked Send/Receive amount cards (AmountInputCardPair)
  with inline token pills and a swap button. All configured navigation tabs set this.

You can opt a standard (tabless) widget into the card layout directly:

const config: WidgetConfig = { mode: 'default', defaultUI: { layout: 'cards' } }

Reacting to tab changes

A NavigationTabChanged event fires on the first resolved tab and on every switch:

import { WidgetEvent, useWidgetEvents } from '@lifi/widget'

const widgetEvents = useWidgetEvents()
widgetEvents.on(WidgetEvent.NavigationTabChanged, ({ tab, previousTab }) => {
  // tab: NavigationTabKey (now active)
  // previousTab: NavigationTabKey | undefined (undefined on first render)
})

Remember to clean up with .off(WidgetEvent.NavigationTabChanged, handler).

Playground

packages/widget-playground/src/defaultWidgetConfig.ts ships the advanced preset
enabled so you can see it immediately:

_navigationTabs: ['swap-advanced', 'bridge-advanced', 'limit'],

Swap the array (or comment it out and set mode) to try other flows.